<template>
	<div>

		<div class="row">
			<div class="col-lg-12">
				<div class="panel">
					<div class="panel-heading bk-bg-primary">
						<h6><i class="fa fa-table red"></i><span class="break"></span>能力平台管理</h6>
					</div>

					<div class="panel-body">
						<div style="float: right; margin-bottom: 10px;">

							<button type="button" class="btn btn-warning " @click="carrierAdd('新增能力平台')">新增能力平台</button>
							<!--<button type="button" class="btn btn-info" @click="setPower()">权限分配</button>-->
						</div>
						<div class="clearfix"></div>

						<div class="table-responsive">
							<table class="table table-striped table-bordered bootstrap-datatable datatable">
								<thead>
								<tr>
									<th>运营商</th>
									<th>账号别名</th>
									<th>集团客户编码</th>
									<th>appkey</th>
									<th>secret</th>
									<th>能力API</th>
									<th>通信报文格式</th>
									<th>服务方法的版本号</th>
									<th>API开关</th>
									<th>账号状态</th>
									<th>操作</th>
								</tr>
								</thead>
								<tbody>
								<tr v-for="(items, index) in carrierInfo.result">
									<td>{{ items.operator }}</td>
									<td>{{ items.alias }}</td>
									<td>{{ items.eccode }}</td>
									<td>{{ items.appkey }}</td>
									<td>{{ items.secret }}</td>
									<td>{{ items.apiurl }}</td>
									<td>{{ items.format }}</td>
									<td>{{ items.version }}</td>
									<td>{{ items.apiswitch == 'A' ? '开':'关' }}</td>
									<td>{{ items.status == 'A' ? '可用':'禁用' }}</td>
									<td>
										<a class="btn btn-success" @click="carrierEdit(items.id)">
											<i class="fa fa-edit "></i>
										</a>
										<a class="btn btn-danger" @click="carrierDel(items.id)">
											<i class="fa fa-trash-o "></i>
										</a>
									</td>
								</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>

			<lsc-page
							mode="event"
							:totalPage="pages"
							:init-page="eventPage"
							:eventFunt="eventFunt"
							@go-page="goPage"></lsc-page>
		</div>

		<!-- Modal Dialog -->
		<div class="modal fade" id="myModalNew">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title bk-fg-primary">{{carrierTitle}}</h4>
					</div>
					<div class="modal-body">
						<div class="panel-body">
							<div class="form-horizontal ">
								<div class="form-group">
									<label class="col-md-3 control-label">运营商</label>
									<div class="col-md-9">
										<select name="yys" class="form-control" size="1" v-model="operatorid">
											<option v-for="(opts, key) in operatorList.result" :value="key">{{opts}}</option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">账号别名</label>
									<div class="col-md-9">
										<input type="text" name="text-input" class="form-control" placeholder="账号别名" v-model="alias">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">集团客户编码</label>
									<div class="col-md-9">
										<input type="text" name="text-input" class="form-control" placeholder="集团客户编码" v-model="eccode">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">appkey</label>
									<div class="col-md-9">
										<input type="text" name="text-input" class="form-control" placeholder="appkey" v-model="appkey">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">secret</label>
									<div class="col-md-9">
										<input type="text" name="text-input" class="form-control" placeholder="secret" v-model="secret">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">能力API</label>
									<div class="col-md-9">
										<input type="text" name="text-input" class="form-control" placeholder="能力API" v-model="apiurl">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">通信报文格式</label>
									<div class="col-md-9">
										<input type="text" name="text-input" class="form-control" placeholder="通信报文格式" v-model="format">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">服务方法的版本号</label>
									<div class="col-md-9">
										<input type="text" name="text-input" class="form-control" placeholder="服务方法的版本号" v-model="version">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">是否开启流量及卡基础信息同步</label>
									<div class="col-md-2">
										<select name="yys" class="form-control" size="1" v-model="apiswitch">
											<option value="A">是</option>
											<option value="D">否</option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">是否启用</label>
									<div class="col-md-2">
										<select name="yys" class="form-control" size="1" v-model="status">
											<option value="A">是</option>
											<option value="D">否</option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">&nbsp;</label>
									<div class="col-md-9 tipsColor">
										{{infoTips}}
									</div>
								</div>
							</div>
						</div>

					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" @click="carrierSave(saveType)">提交</button>
					</div>
				</div>
			</div>
		</div>
		<!-- End Modal Dialog -->

	</div>
</template>
<script>

	import LscPage from '../../components/page_list.vue'
	import {mapGetters} from 'vuex'

	export default{
		name: 'home',
		computed: {
			...mapGetters({
				navStatus: 'getNavStatus',
				carrierInfo: 'getCarrierInfo',
				operatorList: 'getOrderOperator',
				carrierItem: 'getCarrierItem'
			}),
			pages () {
				if(this.carrierInfo.pageInfo){
					return this.carrierInfo.pageInfo.totalPage
				}
			}
		},
		data () {
			return {
				eventPage: 1,
				carrierTitle: '新增能力平台',
				eventFunt: 'fetchCarrierInfo',
				showCheck: false,

				cid: '', // 编辑时使用的ID
				operatorid: '', // 运营商ID
				alias: '', // 账号别名
				eccode: '', // 集团客户编码
				appkey: '', // 必填提示
				secret: '', // 必填提示
				apiurl: '', // 能力API
				format: '', // 通信报文格式
				version: '', // 服务方法的版本号
				apiswitch: '', // API开关
				status: '', // 账号状态
				saveType: 0, // 保存类型： 0 新增， 1 编辑

				infoTips: '', // 必填提示

			}
		},
		methods: {

			goPage (data) {
				this.eventPage = data.page
			},

			carrierAdd () {

				// 初始化
				this.infoTips = ''
				this.saveType = 0
				this.carrierTitle = '新增能力平台'

				this.operatorid = ''
				this.alias = ''
				this.eccode = ''
				this.appkey = ''
				this.secret = ''
				this.apiurl = ''
				this.format = ''
				this.version = ''
				this.apiswitch = ''
				this.status = ''

				$('#myModalNew').modal('show')
			},
			carrierSave (isAdd) {

				let params = {
					operatorid: this.operatorid,
					alias:      this.alias,
					eccode:     this.eccode,
					appkey:     this.appkey,
					secret:     this.secret,
					apiurl:     this.apiurl,
					format:     this.format,
					version:    this.version,
					apiswitch:  this.apiswitch,
					status:     this.status
				}

				if(!this.operatorid){
					this.infoTips = '运营商不能为空'
					return
				}
				if(!this.alias){
					this.infoTips = '账号别名不能为空'
					return
				}
				if(!this.eccode){
					this.infoTips = '集团客户编码不能为空'
					return
				}
				if(!this.appkey){
					this.infoTips = 'appkey不能为空'
					return
				}
				if(!this.secret){
					this.infoTips = 'secret不能为空'
					return
				}
				if(!this.apiurl){
					this.infoTips = '能力API不能为空'
					return
				}
				if(!this.format){
					this.infoTips = '通信报文格式不能为空'
					return
				}
				if(!this.version){
					this.infoTips = '服务方法的版本号不能为空'
					return
				}
				if(!this.apiswitch){
					this.infoTips = '是否开启流量及卡基础信息同步不能为空'
					return
				}
				if(!this.status){
					this.infoTips = '是否启用不能为空'
					return
				}

				if(!isAdd) {
					this.$store.dispatch('fetchCarrierAdd', params)
				}else{
					params.id = this.cid
					this.$store.dispatch('fetchCarrierEdit', params)
				}
				$('#myModalNew').modal('hide')
			},

			carrierEdit (ids) {

				this.cid = ids
				this.infoTips = ''
				this.saveType = 1
				this.carrierTitle = '编辑能力平台'

				this.$store.dispatch('fetchCarrierItem', {id: ids})

				$('#myModalNew').modal('show')
			},

			carrierDel (ids) {

				this.$store.dispatch('fetchCarrierDel', {id: ids})
			},

		},
		mounted () {

			// 能力平台列表
			this.$store.dispatch('fetchCarrierInfo', {page: 1})

			// 运营商列表
			this.$store.dispatch('fetchOrderOperator')

		},
		components: {
			LscPage
		},
		watch: {
			carrierItem (newVal) {

				this.operatorid = newVal.result.operatorid
				this.alias = newVal.result.alias
				this.eccode = newVal.result.eccode
				this.appkey = newVal.result.appkey
				this.secret = newVal.result.secret
				this.apiurl = newVal.result.apiurl
				this.format = newVal.result.format
				this.version = newVal.result.version
				this.apiswitch = newVal.result.apiswitch
				this.status = newVal.result.status
			},
			carrierInfo (newVal) {
				this.eventPage = newVal.pageInfo.pageIndex
			}
		}
	}


</script>

<style>
	.order-set {
		padding: 0 20px 20px 20px;
	}
</style>
